import "./style.scss";
import "../../comm.scss";
import React,{ Component } from 'react';
import Cesium from "cesium/Cesium";
import { Button } from 'antd';
import { connect } from "react-redux";

class Gltf extends Component {

    addGltf(){
        const { viewer } = this.props;
        viewer.entities.removeAll();

        let position = Cesium.Cartesian3.fromDegrees(- 123.0744619,44.0503706,200);
        let heading = Cesium.Math.toRadians(135);
        let pitch = 0;
        let roll = 0;
        let hpr = new Cesium.HeadingPitchRoll(heading,pitch,roll);
        let orientation = Cesium.Transforms.headingPitchRollQuaternion(position,hpr);

        viewer.entities.add({
            position : position,
            orientation : orientation,
            model : {
                uri : "data/gltf/qianbiao.gltf",
                minimumPixelSize : 3000,
                maximumScale : 5000
            }
        });

        viewer.camera.flyTo({
            destination : Cesium.Cartesian3.fromDegrees(- 123.0744619,44.0503706,200)
        });
    }

    render(){
        return (
            <div className="btn">
                <Button onClick={this.addGltf.bind(this)}>加载GLTF模型</Button>
            </div>
        );
    }
}

const mapStateToProps = state => ({
    viewer : state.App.viewer,
    rollerLayer : state.App.rollerLayer,
});

export default connect(mapStateToProps,{})(Gltf);